import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingText: {
    marginVertical: "auto",
    marginHorizontal: "auto",
    fontSize: 16,
    color: "#007BFF",
  },

  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 16,
  },
  chartContainer: {
    alignItems: "center",
    marginBottom: 24,
  },
  centerText: {
    alignItems: "center",
  },
  usedText: {
    fontSize: 14,
    color: "#333",
  },
  usedGB: {
    fontSize: 32,
    fontWeight: "bold",
  },
  percentText: {
    fontSize: 14,
    color: "#666",
  },
  legendContainer: {
    flexDirection: "row",
    marginTop: 16,
    justifyContent: "space-around",
    width: "100%",
  },
  legendItem: {
    flexDirection: "row",
    alignItems: "center",
  },
  legendDot: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: 6,
  },
  dataHeader: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 8,
  },
  dataBlock: {
    flexDirection: "row",
    justifyContent: "space-between",
    backgroundColor: "#f6f6f6",
    padding: 16,
    borderRadius: 8,
    marginBottom: 16,
  },
  dataTitle: {
    fontSize: 16,
    fontWeight: "bold",
  },
  dataSubText: {
    fontSize: 18,
    marginTop: 4,
  },
  dataDesc: {
    fontSize: 12,
    color: "#888",
    marginTop: 4,
  },
  button: {
    backgroundColor: "#ddd",
    borderRadius: 6,
    paddingVertical: 6,
    paddingHorizontal: 16,
  },
  buttonText: {
    color: "#333",
    fontSize: 14,
  },
  footerNote: {
    fontSize: 12,
    color: "#666",
    lineHeight: 18,
    marginTop: 10,
  },
});

export default styles;
